import { defineComponent, ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import './login.less'
import type { FormInstance } from 'ant-design-vue'
import { LockOutlined } from '@ant-design/icons-vue'
import { Input, Form, Button, message } from 'ant-design-vue'
import loginApi from '@/api/login'
import { useStore } from '@/utils/useStore'
import Icon from '@/components/Icon'
export default defineComponent({
  name: 'Login',
  setup(props, { emit }) {
    type User = {
      loginId: string
      loginPassword: string
      loginCaptcha: string
    }
    const store = useStore()
    const router = useRouter()
    const formRef = ref<FormInstance>()
    const loading = ref<boolean>(false)
    const form = reactive<User>({
      loginId: '',
      loginPassword: '',
      loginCaptcha: '',
    })

    // 将背景图转换为base64
    const image = {
      img: require('@/assets/image/login_bg.jpg'),
    }
    const onSubmit = () => {
      formRef.value
        ?.validateFields()
        .then((res) => {
          loading.value = true
          store
            .dispatch('user/Login', form)
            .then((res) => {
              if (res.code === '10000') {
                store.dispatch('user/getMenus').then((result: any) => {
                  if (result.data.code == '10000') {
                    console.log(result.data.data, 'result.data.data')
                    localStorage.adminAsyncRoutes =
                      JSON.stringify(result.data.data) || ''
                    store.commit(
                      'permissionModule/setAsyncRoute',
                      result.data.data,
                    )
                    store.dispatch('permissionModule/getPermissionRoutes')
                  }
                  if (result.data) router.push('/home')
                })
                // if (res.data) router.push('/home')
              } else {
                message.error(res.msg)
              }
              loading.value = false
            })
            .catch(() => {
              loading.value = false
              updateCode()
            })
        })
        .catch((err) => {
          console.log(err)
        })
    }
    // 验证码
    const imgCode = ref<any>()
    const updateCode = () => {
      loginApi.getCaptchaImage().then((rsp: any) => {
        imgCode.value = rsp.data?.data
      })
    }
    updateCode()
    return () => {
      return (
        <div
          class="login_bg"
          style={{ background: `url(${image.img}) no-repeat` }}
        >
          <div class="login-content">
            <div class="login_box">
              <span class="login-title">用户登录</span>
              <Form
                ref={formRef}
                model={form}
                wrapperCol={{ span: 18, offset: 3 }}
              >
                <Form.Item
                  name="loginId"
                  rules={[{ required: true, message: '请输入账号' }]}
                >
                  <Input
                    placeholder="账号"
                    v-model:value={form.loginId}
                    style={{ height: '40px' }}
                    v-slots={{
                      prefix: () => <Icon icon="user" colors="#999"></Icon>,
                    }}
                  />
                </Form.Item>
                <Form.Item
                  name="loginPassword"
                  rules={[{ required: true, message: '请输入密码' }]}
                >
                  <Input
                    type="password"
                    placeholder="密码"
                    v-model:value={form.loginPassword}
                    style={{ height: '40px' }}
                    v-slots={{
                      prefix: () => (
                        <LockOutlined
                          class="site-form-item-icon"
                          style={{ color: '#999' }}
                        />
                      ),
                    }}
                  />
                </Form.Item>
                <Form.Item
                  name="loginCaptcha"
                  rules={[{ required: true, message: '验证码' }]}
                >
                  <div class="captcha-wapper">
                    <Input
                      placeholder="输入验证码"
                      v-model:value={form.loginCaptcha}
                      style={{ width: '56%', height: '40px' }}
                    />
                    <img
                      src={imgCode.value}
                      class="img-code"
                      alt="验证码"
                      title="点击换一张"
                      style="width: 40%;height: 40px;"
                      onClick={updateCode}
                    />
                  </div>
                </Form.Item>
                <Form.Item class="login-btn-box">
                  <Button
                    type="primary"
                    onClick={onSubmit}
                    style={{ width: '100%', borderRadius: '4px' }}
                    loading={loading.value}
                  >
                    登录
                  </Button>
                  {/* <span class="pwBox" onClick={() => Router.push('/forgetPw')}>
                  忘记密码?
                </span> */}
                </Form.Item>
              </Form>
            </div>
          </div>
          <div class="footer">
            ©️2018 至今 云车智途 · 版权所有
            <a href="https://beian.miit.gov.cn" target="_blank">
              渝ICP备18009381号
            </a>
          </div>
        </div>
      )
    }
  },
})
